<template>
  <div v-if="data">
    <div class="header">
      <!-- 导航条 -->
      <nav>
        <router-link to="/" class="active">原创</router-link>
        <router-link to="/">名著</router-link>
        <router-link to="/">有声</router-link>

        <router-link to="/" class="icon">
          <i class="mintui mintui-search"></i
        ></router-link>
      </nav>
      <!-- 轮播图 -->
      <mt-swipe :show-indicators="false" class="swipe">
        <mt-swipe-item>
          <img src="banner/banner01.png" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="banner/banner02.png" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="banner/banner01.png" alt="" />
        </mt-swipe-item>
      </mt-swipe>

      <img class="banner_bt" src="banner/banner_bt.png" />
    </div>

    <!-- icon导航 -->
    <div class="icon_nav">
      <router-link to="/">
        <img src="../assets/icon/nav01.png" alt="" />
        <p>分类</p>
      </router-link>
      <router-link to="/">
        <img src="../assets/icon/nav02.png" alt="" />
        <p>排行</p>
      </router-link>
      <router-link to="/">
        <img src="../assets/icon/nav03.png" alt="" />
        <p>书单</p>
      </router-link>
      <router-link to="/">
        <img src="../assets/icon/nav04.png" alt="" />
        <p>完结</p>
      </router-link>
    </div>

    <!-- tips 信息 -->
    <div class="tips">
      <img class="tips_icon" src="../assets/icon/horn.png" alt="" />
      <div>
        <p>
          <span>
            <span>关灯请闭眼</span>
            幸运铃 x 1
          </span>
        </p>
      </div>
    </div>

    <!-- 今日必读 -->
    <div class="todayread items">
      <h3 class="title">今日必读</h3>
      <mt-swipe :auto="4000" class="books_swipe">
        <mt-swipe-item  v-for="(x,y) in data.data.archives" :key="y">
          <router-link to="/">
            <img class="books_fm" :src="x.pic" />
            <div class="text">
              <div class="top">
                <h4>{{x.title}}</h4>
                <span>{{x.tname}}</span>
              </div>
            </div>
          </router-link>
        </mt-swipe-item>
        <mt-swipe-item>
          <router-link to="/">
            <img class="books_fm" src="books_fm/hongloumeng.jpg" />
            <div class="text">
              <div class="top">
                <h4>红楼梦</h4>
                <span>中国古典四大名著之一中国古典四大名著之一</span>
              </div>
              <div class="bottom">
                <span>曹雪芹</span>
                <span>四大名著之一</span>
              </div>
            </div>
          </router-link>
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!-- 本周强推 -->
    <div class="items strong_push">
      <h3 class="title">本周强推</h3>
      <div class="books_push">
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
        <router-link to="/">
          <img class="books_fm" src="books_fm/hongloumeng.jpg" alt="" />
          <p>红楼梦</p>
          <span>吴承恩</span>
        </router-link>
      </div>
    </div>

    <!-- 新鲜上架 -->
    <div class="items">
      <h3 class="title">新鲜上架</h3>
      <div>
        <div class="item">
          <router-link to="/">
            <img class="books_fm" src="books_fm/hongloumeng.jpg" />
            <div class="text">
              <div class="top">
                <h4>红楼梦</h4>
                <span
                  >中国古典四大名著之一中国古典四大名著之一中国古典四大名著之一</span
                >
              </div>
              <div class="bottom">
                <span>曹雪芹</span>
                <span>四大名著之一</span>
              </div>
            </div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="/">
            <img class="books_fm" src="books_fm/hongloumeng.jpg" />
            <div class="text">
              <div class="top">
                <h4>红楼梦</h4>
                <span
                  >中国古典四大名著之一中国古典四大名著之一中国古典四大名著之一</span
                >
              </div>
              <div class="bottom">
                <span>曹雪芹</span>
                <span>四大名著之一</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>

      <div class="btns">
        <mt-button size="small">全部</mt-button>
        <mt-button size="small">换一换</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },

  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      var url = `https://api.xin88.top/bilibili/news.json`
      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
  },
};
</script>

<style lang="scss" scoped>
// 顶部
.header {
  position: relative;

  .swipe {
    width: 100%;
    height: 60vw;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .banner_bt {
    position: absolute;
    bottom: -1px;
    width: 100%;
    background: url(/public/banner/banner_bt.png) no-repeat center;
    background-size: cover;
  }

  nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    line-height: 2.9rem;
    padding: 0 4rem 0 0.9rem;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0%, rgba(0, 0, 0, 0.4)),
      color-stop(100%, rgba(0, 0, 0, 0))
    );
    background: -webkit-linear-gradient(
      top,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );

    a {
      color: #fff;
      margin-right: 1.8rem;

      &.active {
        font-size: 1.1rem;
      }
    }

    .icon {
      position: absolute;
      right: 0.9rem;
      top: 0.6rem;
      color: #fff;
      background: #0006;
      line-height: 1;
      padding: 0.3rem 0.8rem;
      border-radius: 1.5rem;
      margin-right: 0;
    }
  }
}
// 分类图标
.icon_nav {
  display: flex;
  justify-content: center;
  padding: 0.6rem 1.5rem;

  a {
    padding: 0 1.4rem;
    text-align: center;
    font-size: 0.9rem;
    img {
      margin: 0.4rem 0;
    }
  }
}
// 提示消息
.tips {
  background: #ffcdc733;
  margin: 0.3rem 1rem 0.5rem;
  display: flex;
  border-radius: 2rem;
  position: relative;

  .tips_icon {
    height: 100%;
    position: absolute;
    left: 0;
  }
  p {
    font-size: 0.857rem;
    padding: 0.05rem 0.9rem;
    margin-left: 1rem;
    > span {
      line-height: 1;
      > span {
        color: #ffa28d;
        margin-right: 0.2rem;
      }
    }
  }
}
// 今日必读
.todayread {
  .books_swipe {
    width: 100%;
    height: 35vw;
    margin-top: 0.9rem;
    margin-left: 1.05rem;
    .mint-swipe-items-wrap > div {
      width: 90%;
    }

    a {
      padding: 0 2rem 0.4rem 0;
      box-shadow: 0.0560014934rem 0.0560014934rem 0.1680044801rem 0
        rgb(0 0 0 / 10%);
      border-radius: 10px;
      background: #fff1;

      .top span {
        width: 54vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
      }

      .books_fm {
        width: 20vw;
        height: 26vw;
        margin-right: 0.6rem;
      }
      .text {
        width: 57vw;
        padding-top: 0.9rem;
      }
    }
  }
}

.btns{
    display: flex;
    justify-content: space-between;


    .mint-button--small{
        width: 48%;
        border-radius: 50px;
        background: #f1f1f1;
    }
}
</style>


